import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { enterPage, Perf } from 'utils/track';
import { Field } from '@teamix/ui';
import { Header, Content } from '@alife/devops-ui';
import * as actions from '../actions/index';
import AliasNameSetting from './aliasNameSetting';
import ListLoading from 'atComponents/ListLoading';
import intl from '../../../../../../../../../locale';

class Root extends Component {
  constructor(props) {
    super(props);
    this.field = new Field(this);
  }

  componentDidMount() {
    document.title = intl.get({
      id: 'code-assets.customize.containers.root.EnterprisePersonalizedCloudEffectCodeup',
      defaultMessage: '企业个性化 · 云效 Codeup',
    });

    this.props.getOrgAliasName();
    enterPage('Organization-Settings-Customize', {
      sendPerf: false,
    });
  }

  render() {
    const { isCustomizeLoading } = this.props;
    return (
      <>
        <Header
          title={intl.get({
            id: 'code-assets.customize.containers.root.EnterprisePersonalization',
            defaultMessage: '企业个性化',
          })}
        />
        <Content>
          {isCustomizeLoading ? <ListLoading /> : <AliasNameSetting {...this.props} />}

          {isCustomizeLoading ? null : <Perf page="Organization-Settings-Customize" />}
        </Content>
      </>
    );
  }
}

export default connect(
  (state) => state.organization.settings.customize,
  (dispatch) => bindActionCreators(actions, dispatch),
)(Root);
